<template>
  <div
    class="scale-box tw-relative tw-overflow-hidden tw-bg-gray-400"
    :style="{ 'padding-top': `${100 / ratioValue}%` }">
    <div class="scale-box__inner tw-absolute tw-left-0 tw-right-0 tw-top-0 tw-bottom-0">
      <slot />
    </div>
  </div>
</template>

<script setup>
import { computed } from "@vue/runtime-core"

const props = defineProps({
  aspectRatio: { type: String, default: null }
})

const ratioValue = computed(() => {
  if (!props.aspectRatio) return null
  const parts = props.aspectRatio.split(/[:：]/).map(o => parseInt(o))
  return parts[0] / parts[1]
})

</script>

<style>

</style>
